<template>
  <div class="appoint-callName">
    <CustomTree ref="jshTreeRef" width="220rem" title="请选择监室" api="/znjszd3/comm/getJshsByDwdm" :params="{ type: 'tree' }" @leafNodeClick="getNodeData"></CustomTree>
    <div class="wrap">
      <CustomSearch v-model:form="form" @search="getPersons">
        <template #moreHandle>
          <el-button type="primary" @click="start">
            <i class="iconfont icon-kaishi1"></i>
            开始点名</el-button
          >
        </template>
        <template #right>
          <div class="update-status">
            <span class="status" :style="{ color: statusTitle == '正常结束' ? '#67C23A' : '#409Eff' }">
              <el-icon v-if="status == 'finish'" color="#67C23A"><CircleCheck /></el-icon> {{ statusTitle }}</span
            >
          </div>
        </template>
      </CustomSearch>
      <Persons v-loading="loading" height="870rem" v-model:list="persons" selectable />
    </div>
  </div>
</template>

<script setup name="appointCallName">
import { ref, onBeforeMount, onMounted, computed, watch, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/index'
import { stores } from '@/stores/index.js'
import Stomp from 'stompjs'
const userStore = stores.useUserStore()
const props = defineProps({})
let stompClient = null
let timer = null //websoket  断开重连定时器
let wsData = {} //websoket地址信息
const loading = ref(false)
const status = ref('querying')
const statusTitle = ref('')
const form = ref({
  xm: ''
})
const currentRoom = ref({})
const persons = ref([])
onUnmounted(() => {
  if (stompClient) {
    stompClient.disconnect()
  }
})
onMounted(() => {
  getWsUrl()
})

//获取websockt 地址
const getWsUrl = () => {
  http('/znjszd3/ht/grdm/getWsForJsdm', 'get')
    .then((res) => {
      wsData = res.data
      connectStomp()
    })
    .finally(() => {})
}
const connectStomp = () => {
  clearTimeout(timer)
  if (stompClient !== null) {
    stompClient.disconnect()
  }
  const ws = new WebSocket(wsData.wsUrl)
  stompClient = Stomp.over(ws)
  // stompClient.heartbeat.outgoing = 60000
  // stompClient.heartbeat.incoming = 60000
  stompClient.debug = () => {}
  stompClient.connect(
    { username: '' },
    () => {
      stompClient.subscribe(wsData.wsDestination, function (message) {
        const msg = JSON.parse(message.body)
        console.log(msg)
        if (msg.doWhat != 'rydmResult') {
          if (msg.doWhat == 'jsdmFinish') {
            statusTitle.value = msg.data.jsztzw
          } else {
            statusTitle.value = msg.msg
          }
        } else {
          const index = persons.value.findIndex((item) => item.rybh == msg.data.rybh)
          const p = persons.value[index]
          p.bdjg = msg.data.bdjgzw
          if (msg.data.bdjgzw == '失败') {
            p.bdtpurl = msg.data.bdtpbase64 ? 'data:image/png;base64,' + msg.data.bdtpbase64 : ''
            console.log(p.bdtpurl)
          }
          persons.value.splice(index, 1, p)
        }

        // if (msg.doWhat !== 'getMjxxListFromCnping') {
        //   status.value = 'querying'
        // }
        // if (msg.doWhat == 'getMjxxListFromCnpFinish') {
        //   personData.value = msg.data || []
        //   status.value = 'finish'
        // }
      })
    },
    () => {
      console.log('stomp断开了')
      timer = setTimeout(() => {
        connectStomp()
      }, 2000)
    }
  )
}
const getNodeData = (node) => {
  statusTitle.value = ''

  currentRoom.value = node
  console.log(currentRoom.value)
  getPersons()
}
const getPersons = (params = {}) => {
  loading.value = true
  http(
    '/znjszd3/ryxx/getRyxxList',
    'get',
    Object.assign({}, params, {
      jshs: currentRoom.value.zddm,
      ryorderby: 'rybh'
    })
  )
    .then((res) => {
      console.log(res)
      persons.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}
const start = () => {
  statusTitle.value = ''
  persons.value.forEach((p) => {
    for (const key in p) {
      if (key == 'bdjg' || key == 'bdtpurl') {
        p[key] = ''
      }
    }
  })
  const arr = persons.value.filter((item) => item.selected).map((item) => item.rybh)

  http(
    '/znjszd3/ht/grdm/sddm',
    'post',
    {
      jsh: currentRoom.value.zddm,
      rybhs: arr.join(',')
    },
    false
  ).then((res) => {
    if (res.status == 200) {
      ElMessage.success(res.message[0])
    }
  })
}
</script>
<style lang="scss" scoped>
.appoint-callName {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  .update-status {
    position: absolute;
    right: 50px;
    top: 30px;
    color: #6a7678;
    font-size: 16px;
    .time {
      position: relative;
      margin-left: 30px;
      &::before {
        position: absolute;
        top: 2px;
        left: -15px;
        display: block;
        content: '';
        width: 3px;
        height: 14px;
        background: #ccc;
      }
    }
  }

  .wrap {
    padding: 10px;
    // margin-left: 10px;
    width: calc(100% - 200px - 10px);
    ::v-deep(.custom-search) {
      .search-btn {
        grid-area: 1 / 2 / span 1 / span 3;
      }
    }
  }
  ::v-deep(.room-persons) {
    margin: 10px 0 0 0 !important;
    box-shadow: var(--el-box-shadow-light) !important;
    background-color: #fff;
    // padding: 0 !important;
  }
}
</style>
